<!-- 
     css核心基础
        => 概念: 层叠样式表
        => 作用: 美化网页
        => 语法: 选择器{
                    样式名1：样式值1；
                    样式名2：样式值2；
                 }

                p{
                   color:red;
                   fontSize:18px
                }
         学习html就是学习html标签
         学习css就是学习css选择器和css样式

         选择器
            => 选中html标签元素的方式方法
            => 选择器分类
              基础选择器
                标签选择器 
                   => 根据标签名选中元素
                   p{
                     样式
                   }
                ID选择器
                   => id属性选中元素
                   #p1{
                      样式
                   }
                class选择器
                   => class 属性选中元素
                   .c1{
                      样式
                   }
            高级选择器
                层次选择器
                   子代选择器   M > N   
                               div > p
                   后代选择器
                               M N
                               div li
                   通用兄弟
                               M ~ N
                   相邻兄弟     
                               M + N       
                               
                伪类选择器
                   M:nth-child(n)  
                       => 选中第n个M元素  

                   li:nth-child(2)

                属性选择器
                   M[attr]
                     input[name]

                   M[attr=value]

                *{}
                M,N{}
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css入门</title>
    <style>
        li:nth-child(3){
            background-color: pink;
        }
        input[name='username']{
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>内容1</p>
    <p id="p1">内容2</p>
    <p class="c1">内容3</p>

    <div>
        <ul>
            <li>元素一</li>
            <li>元素二</li>
            <li>元素三</li>
        </ul>
        <p>内容</p>
    </div>

    <input type="text" name="username">
    <input type="password" name="password">
    <input type="text">
</body>
</html>